import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Table, Row, Col, Button, message} from 'antd';
import {InputItem} from '../../../../component/input/Input';
import {BuBaseFormModal, UserBaseForm, PassWordInput} from '../form/Form';
import {UserBaseFormStore, editStore, listStore,searchStore} from '../UserStore';

@observer
export class EditFormModal extends React.Component<any, any> {
     onOk(me){
        return async function(e): Promise<any>{
            if(await editStore.isAsyncValid()){
                editStore.changeConfirmLoading(true);
                
                const data =  await editStore.editBu(_.pick(editStore.getValues(), ['id', 'mobile', 'realname', 'username', 'businessIds','password']))
                
                if(data.success){
                    message.success(data.message,3);
                    editStore.hide();
                    listStore.load(searchStore.getValues());
                }else{
                    message.error(data.message,3);
                }

                editStore.changeConfirmLoading(false);
            }else{
                return false;
            }
        }
    }

    render() {
        return (
            <BuBaseFormModal store={editStore} title="编辑" onOk={this.onOk(this)}>
                <EditForm store = {editStore}/>
            </BuBaseFormModal>
        )
    }
}

@observer
class EditForm extends React.Component<{store: UserBaseFormStore},any>{
    onBlurOrginPId = async ()=>{
        const store: UserBaseFormStore = this.props.store;
        const item = store.fields.originalPassword;
        var res = await store.asyncValid('originalPassword', item.value, true);
        var disabled = !(res.valid && !!item.value);

        if(disabled){
            store.changeFields({
                password: { disabled: disabled, value: '' },
                resPassword: { disabled: disabled, value: ''}
            })
        }else{
            store.changeFields({
                password: { disabled: disabled },
                resPassword: { disabled: disabled }
            })
        }   

        store.valid('password', store.fields.password.value, true);
        store.valid('resPassword', store.fields.resPassword.value,true);
    }
    onAnscyChangeOrginPId = (value)=>{
        const store: UserBaseFormStore = this.props.store;
        store.changeField('originalPassword', {
            value: value
        });
    }
    onChangePId = (value)=>{
        const store: UserBaseFormStore = this.props.store;
        store.valid('password',value,true);
        store.valid('resPassword',store.fields.resPassword.value,true)
    }

    onChangeResPId = (value)=>{
        const store: UserBaseFormStore = this.props.store;
        store.valid('resPassword',value,true);
        store.valid('password',store.fields.password.value,true);
    }

    render(){
        const store = this.props.store;

        const colStyle = {
            labelCol: { span: 6},
            wrapperCol: {span: 18}
        }

        return (
            <div>
                <Row type="flex">
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="username" 
                            title="用户名:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="realname" 
                            title="姓名:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <PassWordInput store={store} 
                            type= "password"
                            myKey= "originalPassword" 
                            title="原密码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            anscy = {true}
                            onBlur = {this.onBlurOrginPId}
                            onAnscyChange = {this.onAnscyChangeOrginPId}/>
                    </Col>
                    <Col span={12}>
                        <PassWordInput store={store} 
                            type= "password"
                            myKey= "password" 
                            title="新密码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            onChange = {this.onChangePId}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <PassWordInput store={store}
                            type= "password" 
                            myKey= "resPassword" 
                            title= "确认密码:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}
                            onChange = {this.onChangeResPId}/>
                    </Col>
                    <Col span={12}>
                        <InputItem store={store} 
                            myKey="mobile" 
                            title="手机号:" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <UserBaseForm store = {this.props.store}/>
            </div>
        );
    }
}
